const canvas = document.querySelector('#canvas')
// 利用获取到的画布初始化一个2D的画笔
const context = canvas.getContext('2d');


// new 一个天空实例
const sky = new Sky(SKY)
// console.log(sky);
// new 一个游戏加载类
const loading = new Loading(LOADING)
// new 一个战机
const hero = new Hero(HERO)
// new 子弹
const bullet = new Bullet(BULLET)
// 分数 score  我方生命值 life
let score = 0;
let life = 3;


// state 表示游戏状态 取值必须是以上定义的五种状态
let state = START;
// 为canvas绑定一个点击事件,且他如果是START状态时修改成STARTING状态
canvas.addEventListener('click', () => {
  if (state === START) {
    state = STARTING
  }
})
// 为canvas绑定一个鼠标移动事件,用以移动战机
canvas.addEventListener('mousemove', (e) => {
  // console.log(e.offsetX, e.offsetY);
  hero.x = e.offsetX - hero.width / 2;
  hero.y = e.offsetY - hero.height / 2;
})

// 为canvas绑定鼠标离开事件，用以暂停游戏 RUNNING -> PAUSE
canvas.addEventListener('mouseleave', () => {
  if (state === RUNNING) {
    state = PAUSE
  }
})
// 为canvas绑定鼠标进入事件，用以继续游戏 PAUSE -> RUNNING
canvas.addEventListener('mouseenter', () => {
  if (state === PAUSE) {
    state = RUNNING
  }
})

// 该变量中有所有飞机的实例
let enemies = []
//敌机产生的速率
let ENEMY_CREATE_INTERVAL = 800;
let ENEMY_LASTTIME = new Date().getTime();
// 全局函数 规定时间内产生敌机
function createComponent() {
  const currentTime = new Date().getTime();
  if (currentTime - ENEMY_LASTTIME >= ENEMY_CREATE_INTERVAL) {
    let chance = Math.floor(Math.random() * 100)
    if (chance < 60) {
      // 产生一架小飞机
      enemies.push(new Enemy(E1))
    } else if (chance < 90) {
      // 中飞机
      enemies.push(new Enemy(E2))
    } else {
      // 大飞机
      enemies.push(new Enemy(E3))
    }
    ENEMY_LASTTIME = currentTime
  }
  console.log(enemies);
  // debugger;
}
// 飞机碰撞检测函数
function checkHit() {
  // 遍历所有敌机
  for (let i = 0; i < enemies.length; i++) {
    // 判断敌机与我机碰撞
    if (enemies[i].hit(hero)) {
      enemies[i].collide()
      hero.collide()
    }
    // 第二层遍历所有的子弹
    for (let j = 0; j < hero.bulletList.length; j++) {
      // 用第i个敌机和第j个子弹进行碰撞检测 返回一个布尔类型的值
      enemies[i].hit(hero.bulletList[j]);
      // 如果碰到才做某些事情
      if (enemies[i].hit(hero.bulletList[j])) {
        // 清除这架敌机和子弹
        enemies[i].collide()
        hero.bulletList[j].collide()
      }
    }
  }
}

// 全局函数 来判断所有子弹/敌人组件
function judgeComponent() {
  for (let i = 0; i < hero.bulletList.length; i++) {
    hero.bulletList[i].move();
  }
  for (let i = 0; i < enemies.length; i++) {
    enemies[i].move()
  }
}
// 全局函数 来绘制所有的子弹/敌人  / 分数和我方飞机血量
function paintComponent() {
  for (let i = 0; i < hero.bulletList.length; i++) {
    hero.bulletList[i].paint(context);
  }
  for (let i = 0; i < enemies.length; i++) {
    enemies[i].paint(context)
  }

  // 绘制 score&life面板
  context.font = '20px 微软雅黑'
  context.textAlign = 'left'
  context.fillText('score:' + score, 10, 20)
  context.textAlign = 'right'
  context.fillText('life:' + life, 480 - 20, 20)
}
// 全局函数 来销毁所有子弹/敌人
function destroyComponent() {
  // 我方飞机销毁
  if (hero.destroy) {
    // 飞机销毁，进入游戏结束状态
    state = END
  }
  for (let i = 0; i < hero.bulletList.length; i++) {
    if (hero.bulletList[i].outOfBounds() || hero.bulletList[i].destroy) {
      // 判断有无飞出画布
      hero.bulletList.splice(i, 1)
    }
  }
  for (let i = 0; i < enemies.length; i++) {
    if (enemies[i].destroyed || enemies[i].outOfBounds()) {
      enemies.splice(i, 1)
    }
  }
}



// 五个参数
//    images 加载的图片对象
// 1、 dX 图片开始绘制的左上角的那个横坐标
// 2、 dY 图片开始绘制的左上角的那个纵坐标
// 3、 dWidth 图片在canvas绘制的宽度 （缺省值表示的就是绘制到整张canvas中）
// 4、 dHeight 图片在canvas绘制的高度
bg.addEventListener('load', () => {
  setInterval(() => {

    /// 会实时的渲染整个canvas对象， 当游戏进入到不同的状态时渲染不同的内容
    switch (state) {

      case START:
        // console.log('游戏开始');
        // 渲染移动天空背景
        sky.judge()
        sky.paint(context);
        // 飞机大战LOGO
        // 图片原始宽高的获取 naturalWidth&naturalHeight
        let LOGO_X = (480 - copyright.naturalWidth) / 2;
        let LOGO_Y = (700 - copyright.naturalHeight) / 2;
        context.drawImage(copyright, LOGO_X, LOGO_Y)
        break;

      case STARTING:
        // console.log('开始时');
        // 渲染移动天空背景
        sky.judge()
        sky.paint(context);
        // 飞机加载类 loading
        loading.paint(context)
        loading.judge()
        break;

      case RUNNING:
        // console.log('运行时');
        // 渲染移动天空背景
        sky.judge()
        sky.paint(context);
        // 渲染双方飞机
        hero.judge();
        hero.paint(context)
        hero.shoot()
        judgeComponent();
        paintComponent();
        destroyComponent();
        createComponent();
        checkHit();
        break;

      case PAUSE:
        console.log('暂停');
        // 渲染暂停LOGO
        let PAUSE_X = (480 - pause.naturalWidth) / 2;
        let PAUSE_Y = (700 - pause.naturalHeight) / 2;
        context.drawImage(pause, PAUSE_X, PAUSE_Y)
        break;

      case END:
        console.log('结束');
        // 渲染 GAME_OVER
        context.font = 'bold 25px 微软雅黑'
        // 文本水平居中
        context.textAlign = 'center';
        // 垂直居中
        context.textBaseline = 'middle'
        context.fillText('GAME_OVER', 480 / 2, 700 / 2)
        break;
    }

    // sky.judge()
    // sky.paint(context);
  }, 10)
})